
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-HSEguanli"></i>
                    <div class="name">icon-HSE</div>
                    <div class="fontclass">.icon-HSEguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-normalization"></i>
                    <div class="name">icon-normalization</div>
                    <div class="fontclass">.icon-normalization</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gongyinglian"></i>
                    <div class="name">icon-gongyinglian</div>
                    <div class="fontclass">.icon-gongyinglian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-close"></i>
                    <div class="name">icon-close</div>
                    <div class="fontclass">.icon-close</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-management"></i>
                    <div class="name">icon-management</div>
                    <div class="fontclass">.icon-management</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bell"></i>
                    <div class="name">icon-bell</div>
                    <div class="fontclass">.icon-bell</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-user"></i>
                    <div class="name">icon-user</div>
                    <div class="fontclass">.icon-user</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-arrow-left"></i>
                    <div class="name">arrow-left</div>
                    <div class="fontclass">.icon-arrow-left</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-quality"></i>
                    <div class="name">icon-quality</div>
                    <div class="fontclass">.icon-quality</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-plus"></i>
                    <div class="name">icon-plus</div>
                    <div class="fontclass">.icon-plus</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-expand"></i>
                    <div class="name">icon-expand</div>
                    <div class="fontclass">.icon-icon-expand</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-knowledge-base"></i>
                    <div class="name">icon-knowledge-base</div>
                    <div class="fontclass">.icon-knowledge-base</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-arrow-right"></i>
                    <div class="name">arrow-right</div>
                    <div class="fontclass">.icon-arrow-right</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-info"></i>
                    <div class="name">icon-info</div>
                    <div class="fontclass">.icon-info</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-edit"></i>
                    <div class="name">icon-edit</div>
                    <div class="fontclass">.icon-edit</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-exit"></i>
                    <div class="name">icon-exit</div>
                    <div class="fontclass">.icon-exit</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tips"></i>
                    <div class="name">icon-tips</div>
                    <div class="fontclass">.icon-tips</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-search"></i>
                    <div class="name">icon-search</div>
                    <div class="fontclass">.icon-search</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-triangle-right"></i>
                    <div class="name">icon-triangle-right</div>
                    <div class="fontclass">.icon-triangle-right</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-triangle-left"></i>
                    <div class="name">icon-triangle-left</div>
                    <div class="fontclass">.icon-triangle-left</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-triangle-up"></i>
                    <div class="name">icon-triangle-up</div>
                    <div class="fontclass">.icon-triangle-up</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-triangle-down"></i>
                    <div class="name">icon-triangle-down</div>
                    <div class="fontclass">.icon-triangle-down</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-operation"></i>
                    <div class="name">icon-operation</div>
                    <div class="fontclass">.icon-operation</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-worker"></i>
                    <div class="name">icon-worker</div>
                    <div class="fontclass">.icon-icon-worker</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-equipment"></i>
                    <div class="name">icon-equipment</div>
                    <div class="fontclass">.icon-equipment</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-trash"></i>
                    <div class="name">iocn-trash</div>
                    <div class="fontclass">.icon-trash</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-calendar"></i>
                    <div class="name">icon-calendar</div>
                    <div class="fontclass">.icon-calendar</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-user-info"></i>
                    <div class="name">icon-user-info</div>
                    <div class="fontclass">.icon-user-info</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hollow-triangle-left"></i>
                    <div class="name">icon-hollow-triangle-left</div>
                    <div class="fontclass">.icon-hollow-triangle-left</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hollow-triangle-down"></i>
                    <div class="name">icon-hollow-triangle-down</div>
                    <div class="fontclass">.icon-hollow-triangle-down</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hollow-triangle-up"></i>
                    <div class="name">icon-hollow-triangle-up</div>
                    <div class="fontclass">.icon-hollow-triangle-up</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hollow-triangle-right"></i>
                    <div class="name">icon-hollow-triangle-right</div>
                    <div class="fontclass">.icon-hollow-triangle-right</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-batch"></i>
                    <div class="name">icon-batch</div>
                    <div class="fontclass">.icon-icon-batch</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-energy"></i>
                    <div class="name">icon-energy</div>
                    <div class="fontclass">.icon-energy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-required"></i>
                    <div class="name">icon-required</div>
                    <div class="fontclass">.icon-required</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-more"></i>
                    <div class="name">icon-more</div>
                    <div class="fontclass">.icon-more</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-director"></i>
                    <div class="name">icon-director</div>
                    <div class="fontclass">.icon-director</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-list"></i>
                    <div class="name">icon-list</div>
                    <div class="fontclass">.icon-list</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chart"></i>
                    <div class="name">icon-chart</div>
                    <div class="fontclass">.icon-chart</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-log"></i>
                    <div class="name">icon-log</div>
                    <div class="fontclass">.icon-log</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-minus-sign"></i>
                    <div class="name">icon-minus-sign</div>
                    <div class="fontclass">.icon-minus-sign</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-error"></i>
                    <div class="name">icon-error</div>
                    <div class="fontclass">.icon-error</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-true"></i>
                    <div class="name">icon-true</div>
                    <div class="fontclass">.icon-true</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-lock"></i>
                    <div class="name">icon-lock</div>
                    <div class="fontclass">.icon-icon-lock</div>
                </li>
				
				<li>
                <i class="icon iconfont icon-renwu"></i>
                    <div class="name">人物</div>
                    <div class="fontclass">.icon-renwu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye"></i>
                    <div class="name">首页</div>
                    <div class="fontclass">.icon-shouye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xinxi"></i>
                    <div class="name">信息(1)</div>
                    <div class="fontclass">.icon-xinxi</div>
                </li>

                <li>
                <i class="icon iconfont icon-copy"></i>
                    <div class="name">copy</div>
                    <div class="fontclass">.icon-copy</div>
                </li>
				
				<li>
                <i class="icon iconfont icon-validation-outline"></i>
                    <div class="name">验证码</div>
                    <div class="fontclass">.icon-validation-outline</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lock-outline"></i>
                    <div class="name">密码</div>
                    <div class="fontclass">.icon-lock-outline</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-search-outline"></i>
                    <div class="name">高级</div>
                    <div class="fontclass">.icon-search-outline</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-user-outline"></i>
                    <div class="name">用户名</div>
                    <div class="fontclass">.icon-user-outline</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-add-user"></i>
                    <div class="name">添加用户</div>
                    <div class="fontclass">.icon-add-user</div>
                </li>
				
				<li>
				     <i class="icon iconfont icon-import"></i>
                    <div class="name">导入</div>
                    <div class="fontclass">.icon-import</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-custom"></i>
                    <div class="name">自定义</div>
                    <div class="fontclass">.icon-custom</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-exporting"></i>
                    <div class="name">导出</div>
                    <div class="fontclass">.icon-exporting</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shuaxin"></i>
                    <div class="name">刷新</div>
                    <div class="fontclass">.icon-shuaxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-details"></i>
                    <div class="name">详情</div>
                    <div class="fontclass">.icon-details</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-alarm-clock"></i>
                    <div class="name">预报</div>
                    <div class="fontclass">.icon-alarm-clock</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tool"></i>
                    <div class="name">工具</div>
                    <div class="fontclass">.icon-tool</div>
                </li>
				
				  <li>
                <i class="icon iconfont icon-gps"></i>
                    <div class="name">gps</div>
                    <div class="fontclass">.icon-gps</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-nei"></i>
                    <div class="name">内</div>
                    <div class="fontclass">.icon-nei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingdan"></i>
                    <div class="name">订单</div>
                    <div class="fontclass">.icon-dingdan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wai"></i>
                    <div class="name">外</div>
                    <div class="fontclass">.icon-wai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cheliang"></i>
                    <div class="name">车辆</div>
                    <div class="fontclass">.icon-cheliang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuyin"></i>
                    <div class="name">语音</div>
                    <div class="fontclass">.icon-yuyin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cangku"></i>
                    <div class="name">仓库</div>
                    <div class="fontclass">.icon-cangku</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fasong"></i>
                    <div class="name">发送</div>
                    <div class="fontclass">.icon-fasong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dayin"></i>
                    <div class="name">打印1</div>
                    <div class="fontclass">.icon-dayin</div>
                </li>
				
                <li>
                <i class="icon iconfont icon-duigou"></i>
                    <div class="name">对勾</div>
                    <div class="fontclass">.icon-duigou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jian"></i>
                    <div class="name">减</div>
                    <div class="fontclass">.icon-jian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shebei"></i>
                    <div class="name">设备</div>
                    <div class="fontclass">.icon-shebei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-menjin"></i>
                    <div class="name">门禁</div>
                    <div class="fontclass">.icon-menjin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daohuo"></i>
                    <div class="name">到货</div>
                    <div class="fontclass">.icon-daohuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pandianfangan"></i>
                    <div class="name">盘点方案</div>
                    <div class="fontclass">.icon-pandianfangan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pandianqizi"></i>
                    <div class="name">旗子</div>
                    <div class="fontclass">.icon-pandianqizi</div>
                </li>
				<li>
                <i class="icon iconfont icon-jiliang"></i>
                    <div class="name">计量</div>
                    <div class="fontclass">.icon-jiliang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jianhuayan"></i>
                    <div class="name">检化验</div>
                    <div class="fontclass">.icon-jianhuayan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-diaobo"></i>
                    <div class="name">调拨</div>
                    <div class="fontclass">.icon-diaobo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-detailsmall"></i>
                    <div class="name">详情细边框</div>
                    <div class="fontclass">.icon-detailsmall</div>
                </li>
				
                <li>
                <i class="icon iconfont icon-new-built"></i>
                    <div class="name">新建账单</div>
                    <div class="fontclass">.icon-new-built</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-payable"></i>
                    <div class="name">应付账单号</div>
                    <div class="fontclass">.icon-payable</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-receivable"></i>
                    <div class="name">应收账单号</div>
                    <div class="fontclass">.icon-receivable</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-goback"></i>
                    <div class="name">返回</div>
                    <div class="fontclass">.icon-goback</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>

         <h2 id="font-class-">font-class组合应用实例</h2>
          <hr>
          <ul class="icon_lists clear">
            <li>
                <span class="zlst-icon  icon-bg-blue">
                    <span class="iconfont icon-true"></span>
                </span>
            </li>

            <li>
                <span class="zlst-icon  icon-bg-orange">
                    <span class="iconfont icon-icon-lock"></span>
                </span>
            </li>
        </ul>

        <p>蓝色背景：</p>
        <pre>
            <code class="lang-css hljs">&lt;<span class="hljs-selector-tag">span </span><span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">zlst-icon </span> <span class="hljs-selector-tag">icon-bg-blue</span>"&gt;&lt;<span class="hljs-selector-tag">span</span><span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont </span><span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">span</span>&gt;&lt;/<span class="hljs-selector-tag">span</span>&gt;</code>
        </pre>

        <p>桔色背景：</p>
        <pre>
            <code class="lang-css hljs">&lt;<span class="hljs-selector-tag">span </span><span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">zlst-icon </span> <span class="hljs-selector-tag">icon-bg-orange</span>"&gt;&lt;<span class="hljs-selector-tag">span</span><span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont </span><span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">span</span>&gt;&lt;/<span class="hljs-selector-tag">span</span>&gt;</code>
        </pre>

    </div>
</body>
</html>
